<template>
	<!-- 支付成功-->
	<view class="Success">
			<view class="status" :style="{ position: headerPosition, top: statusTop }"></view>
			<view  class="place" :style="{ background: colors.color }"></view>
		<view class="top_nav" :style="{background:newColor.color}">
			<p class="top1">支付成功</p>
			<p class="top2">请在个人中心界面查看此订单详情</p>
		</view>
		<view class="img_box"><image src="../../static/image/success.png" mode=""></image></view>
		<!-- 如果是拼团支付 -->
		<view class="pop_box" v-if="goodsData.team_list && goodsData.team_list.length !== 0">
			<p class="p4">
				还差
				<text :style="{ color: newColor.color }">{{goodsData.team_num_less}}人</text>
				拼成
			</p>
			<p class="p5">
				<text>剩余:</text>
				<uni-countdown
					colors="#ffffff"
					:background-color="newColor.color"
					border-color="#fff"
					style="float: left;"
					:show-day="false"
					:hour="setTime(goodsData.team_end_time).hours"
					:minute="setTime(goodsData.team_end_time).minutes"
					:second="setTime(goodsData.team_end_time).second"
				></uni-countdown>
				<text class="item"  :style="{backgroundColor: newColor.color}">{{times}}</text>
			</p>
			<view class="people">
				<p class="have_data" v-for="(item,index) in goodsData.team_list" :key="index">
					<image :src="item.head_img" mode="" :style="{ borderColor: newColor.color }"></image>
					<text>{{item.username}}</text>
				</p>
				<p class="not_data" v-for="item in goodsData.team_num_less" :key="item"><image src="" :style="{borderColor:newColor.color}" mode=""></image></p>
			</view>
			<button class="nowAdd" open-type="share" :style="{background:newColor.color}">邀请好友</button>
		</view>
		<view style="overflow: hidden;margin-top: 60upx;" v-else>
			<p class="youhui">
				<text class="text1">订单编号</text>
				<text class="text2">{{goodsData.order.order_no}}</text>
			</p>
			<p class="youhui">
				<text class="text1">实付款</text>
				<text class="text2" :style="{color:newColor.color}">¥{{goodsData.order.total_price}}</text>
			</p>
		</view>
		<p class="seeOrder" @tap="jumpOrder" :style="{background:newColor.color}">个人中心</p>
	</view>
</template>

<script>
	import {getUserInfo} from '@/static/utils/ahth.js'
	export default {
		data(){
			return{
				statusTop: null,
				goodsData:{},
				headerPosition: 'fixed',
				timeData:{},
				times:0,
				status: 0, //用来判断支付的是拼团订单还是普通订单 0(拼团) 1(普通)
				timeInter:'',
				userInfo: getUserInfo()
			}
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop >= 0 ? 'fixed' : 'absolute';
			this.headerTop = e.scrollTop >= 0 ? null : 0;
			this.statusTop = e.scrollTop >= 0 ? null : -this.statusHeight + 'px';
		},
		onLoad() {
			this.status = this.$Route.query.status
			console.log(this.$Route.query.status)
			console.log(this.status)
			this.orderid = this.$Route.query.orderid
			console.log(this.$Route.query)
			this.changeTabBar()
			this.getOrderData()
		},
		onHide() {
			console.log('页面隐藏了');
			// this.pause()
			clearInterval(this.timeInter)
		},
		onUnload() {
			console.log('页面离开了');
			// this.pause()
			clearInterval(this.timeInter)
		},
		methods:{
			changeTabBar() {
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: this.newColor.color,
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				});
			},
			setHaomiao(){
				let that = this
				clearInterval(that.timeInter)
				that.times = 99
				that.timeInter = setInterval(()=>{
					if(that.times > 0){
						that.times --
					}else{
						that.times = 99
					}
				},20)
			},
			jumpOrder(){
				this.$Router.pushTab({path:'/pages/tabBar/user/user'})
			},
			pause() {
			   const countDown = this.selectComponent('.countdown');
			   countDown.pause();
			},
			getOrderData(){
				this.request('order/orderDetail',{
					order_id: this.orderid || 25
				}).then(res=>{
					console.log(res)
					this.goodsData = res.data
					this.setHaomiao()
				})
			},
			setTime(data){//计算时间
				// 判断当前是否在拼团开启时间内
				if(!data){
					return
				}
				let end = new Date(Number(data)*1000)
				let now = new Date()
				let time = {}
				let newtime = end
				// 获取剩余天数
				time.day = Math.floor(newtime / 1000 / 60 / 60 / 24);
				var daysRound = Math.floor(time.day);
				time.hours =  Math.floor(newtime / 1000 / 60 / 60 - (24 * daysRound));
				var hoursRound = Math.floor(time.hours);
				time.minutes =  Math.floor(newtime / 1000 / 60 - (24 * 60 * daysRound) - (60 * hoursRound));
				var minutesRound = Math.floor(time.minutes);
				time.seconds =  Math.floor(newtime / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound));
				return time
			},
			onChange(e) {
			  e.detail.milliseconds = (e.detail.milliseconds / 10).toFixed(0)
			  this.timeData = e.detail
			},
		},
		onShareAppMessage: function(ret) {
			//**** 在这里配置弹出的分享框的内容
			let uid = this.userInfo.user_id || '';
			let goodid = this.goodsData.goods[0].goods_id
			let teamId = this.goodsData.order.team_id
			let img =  this.goodsData.goods[0].img[0]
			let title = this.goodsData.goods[0].title
			return {
				title: title, // 设置弹出框的标题
				path: `/pagesA/pages/goods/onjoin?pid=${uid}&goodid=${goodid}&teamId=${teamId}`, //设置弹出框分享出去的链接地址
				imageUrl: img, //设置弹出框分享出去的图片
				success: function(res) {
					console.log(res);
				}
			};
		},
	}
</script>

<style scoped lang="scss">
page {
	position: relative;
	background-color: #fff;
}
.place {
	background-color: #f23a3a;
	height: 50upx;
	/*  #ifdef  APP-PLUS  */
	margin-top: var(--status-bar-height);
	/*  #endif  */
}
.status {
	width: 100%;
	height: 0;
	position: fixed;
	z-index: 10;
	background-color: #f06c7a;
	top: 0;
	/*  #ifdef  APP-PLUS  */
	height: var(--status-bar-height); //覆盖样式
	/*  #endif  */
}
.Success {
	position: relative;
	.top_nav {
		height: 460upx;
		background: #f23a3a;
		padding-top: 100upx;
		.top1 {
			color: #ffffff;
			font-size: 60upx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			text-align: center;
			padding-top: 60upx;
			color: rgba(255, 255, 255, 1);
			// line-height:21upx;
			text-shadow: 0upx 7upx 13upx rgba(151, 107, 30, 0.36);
		}
		.top2 {
			font-size: 28upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			line-height: 21upx;
			text-shadow: 0px 7upx 13upx rgba(151, 107, 30, 0.36);
			text-align: center;
			margin-top: 20upx;
		}
	}
	.img_box {
		height: 140upx;
		background: rgba(255, 255, 255, 1);
		border-top-left-radius: 20%;
		border-top-right-radius: 20%;
		position: absolute;
		width: 100%;
		top: 430upx;
		left: 0;
		image {
			width: 140upx;
			height: 140upx;
			margin: 0 auto;
			position: absolute;
			top: -70upx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
}
.pop_box {
	width: 600rpx;
	min-height: 340upx;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 0upx 21upx 0px rgba(255, 74, 44, 0.1);
	border-radius: 10upx;
	padding: 30upx;
	margin: 0 auto;
	margin-top: 60upx;
	box-sizing: content-box;
	overflow: hidden;
	.view1 {
		overflow: hidden;
		position: relative;
		border-bottom: 1upx solid #f2f2f2;
		.p2 {
			width: 40%;
			margin-top: 20upx;
			float: left;
			image {
				width: 50upx;
				height: 50upx;
				border-radius: 50%;
				float: left;
				margin-top: 3upx;
			}
			text {
				font-size: 24upx;
				font-family: Droid Sans Fallback;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-left: 20upx;
			}
		}
		.p3 {
			width: 60%;
			margin-top: 20upx;
			float: right;
			.text1 {
				font-size: 24upx;
				color: #333;
				display: block;
			}
			.text2 {
				float: left;
				font-size: 22upx;
				color: #999999;
				line-height: 60upx;
			}
		}
		.goto {
			width: 100upx;
			height: 46upx;
			background: rgba(242, 58, 58, 1);
			border-radius: 23upx;
			font-size: 22upx;
			color: #ffffff;
			text-align: center;
			line-height: 46upx;
			position: absolute;
			right: 0;
			bottom: 20upx;
		}
	}
	.p4 {
		text-align: center;
		font-size: 28upx;
	}
	.p5 {
		overflow: hidden;
		margin-top: 10upx;
		> text {
			float: left;
			margin: 0 auto;
			color: #999;
			font-size: 22upx;
			line-height: 60upx;
			margin-left: 28%;
		}
		.item {
		  display: inline-block;
		  width: 35upx;
		  margin: 0 10upx;
		  color: #fff;
		  font-size: 24upx;
		  text-align: center;
		  background-color: #1989fa;
		  border-radius: 5upx;
		  margin-top: 7upx;
		  height: 40upx!important;
		  line-height: 40upx;
		}
	}
	.people {
		overflow: hidden;
		display: flex;
		width: 600upx;
		justify-content: center;
		// justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 10upx;
		p {
			flex: 1;
			overflow: hidden;
			max-width: 20%;
			min-width: 20%;
			text-align: center;
			margin-bottom: 10upx;
			image {
				width: 50upx;
				height: 50upx;
				border: 2upx dashed rgba(242, 58, 58, 1);
				border-radius: 50%;
				display: block;
				margin: 0 auto;
			}
			text {
				font-size: 24upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: inline-block;
				width: 120upx;
			}
		}
	}
}
.close {
	width: 88upx;
	height: 88upx;
	display: block;
	margin: 0 auto;
	margin-top: 30upx;
}
.nowAdd {
	width: 150upx;
	height: 46upx;
	background: rgba(242, 58, 58, 1);
	border-radius: 23upx;
	font-size: 22upx;
	font-family: Droid Sans Fallback;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	text-align: center;
	line-height: 46upx;
	margin: 0 auto;
	margin-top: 40upx;
}
.seeOrder {
	width: 290upx;
	height: 76upx;
	line-height: 76upx;
	text-align: center;
	background: rgba(242, 58, 58, 1);
	border-radius: 38upx;
	font-size: 32upx;
	font-family: Droid Sans Fallback;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	position: fixed;
	left: 50%;
	bottom: 100upx;
	transform: translateX(-50%);
}
.youhui {
	height: 40upx;
	line-height: 40upx;
	padding: 20upx 30upx;
	border-bottom: 1upx solid #f2f2f2;
	box-sizing: content-box;
	.text1 {
		font-size: 24upx;
		color: #333333;
	}
	.text2 {
		float: right;
		color: #999999;
		font-size: 24upx;
		margin-right: 5upx;
		margin-top: 2upx;
	}
	image {
		float: right;
		width: 12upx;
		height: 22upx;
		margin-top: 12upx;
	}
}
.countdown{
	margin-top: 10upx;
	margin: 0 auto;
	.item {
	  display: inline-block;
	  width: 35upx;
	  margin: 0 10upx;
	  color: #fff;
	  font-size: 24upx;
	  text-align: center;
	  background-color: #1989fa;
	  border-radius: 5upx;
	  margin-top: 10upx;
	}
}
/deep/.uni-countdown__number{
	width: 45upx!important;
	margin: 0 10upx;
	height: 40upx!important;
	color: #fff;
	font-size: 24upx;
	text-align: center;
	border-radius: 5upx;
	margin-top: 10upx;
}
</style>
